<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h2>{{title}}</h2>
      <ul>
        <li v-for="one in msg" v-bind:key="one.id">
          <span>{{ one.title }}</span>
          <ul>
            <li v-for="val in one.items" v-bind:key="val" v-if="val !== '烧茄子'">{{val}}</li>
          </ul>
        </li>
      </ul>
      <!-- 列表渲染：每个列表需要拥有唯一的key -->
      <!-- 列表的嵌套：一定要注意内外层遍历的数据 -->
      <!-- 当列表渲染中有条件渲染时，列表渲染优先 -->
      <!-- 但其实vue件建议v-for和v-if同时使用 -->
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        title:"hello 列表渲染",
        msg:[{
          id:"1",
          title:"大菜",
          items:["红烧肉","酸菜鱼","剁椒鱼头"]
        },{
          id:"2",
          title:"小菜",
          items:["木须肉","烧茄子","鱼香肉丝"]
        },{
          id:"3",
          title:"凉菜",
          items:["拍黄瓜","花生米","拌皮蛋"]
        }]
      }
    })
  </script>
</html>
